<template>
	<view class="main">
		<view class="bg">
			<image src="../../static/bg.png" mode="" class="bg-img"></image>
		</view>
		<view class="top">
			<text class="top_text">
				位于四川省成都市郫都区德源镇东林艺术村，是全国唯一经袁隆平院士授权以其名字命名的园区。<br />
				全国首批科学家精神教育基地，园区以袁隆平院士为精神支柱，以稻蒜文化为基础，将科研场景
				变成教学场景，建立劳动教育、农业科普教育基地及成人实训基地。
			</text>
		</view>
		<view class="bottom">
			<uni-card thumbnail="" extra="" note="Tips" class="tip" @click="btn1()">
				<uni-row>
					<uni-col :span="4">
						<image src="../../static/index-1.png" mode="" class="icon"></image>
					</uni-col>
					<uni-col :span="20">
						<text class="title">个人预约</text>
						<br />
						<text class="En nowrap">Personal reservation</text>

					</uni-col>
				</uni-row>
			</uni-card>
			<uni-card thumbnail="" extra="" note="Tips" class="tip tip2" @click="btn2()">
				<uni-row>
					<uni-col :span="4">
						<image src="../../static/index-2.png" mode="" class="icon"></image>
					</uni-col>
					<uni-col :span="20">
						<text class="title">团体预约</text><br />
						<text class="En nowrap">Group reservation</text>

					</uni-col>
				</uni-row>
			</uni-card>
			<uni-card thumbnail="" extra="" note="Tips" class="tip tip3" @click="btn3()">
				<uni-row>
					<uni-col :span="4">
						<image src="../../static/index-3.png" mode="" class="icon"></image>
					</uni-col>
					<uni-col :span="20">
						<text class="title">扫码入园</text><br />
						<text class="En nowrap">Scan the QR code to enter the park</text>
						
					</uni-col>
				</uni-row>
			</uni-card>
		</view>

	</view>

</template>



<script setup>
	import PersonalAppointVue from './notes.vue';

	function btn1() {
    sessionStorage.setItem("record","personal")
		uni.navigateTo({
			url: '/pages/apointment/notes'
		})
	}

	function btn2() {
    sessionStorage.setItem("record","group")
		uni.navigateTo({
			url: '/pages/apointment/notes'
		})
	}

	function btn3() {
    let record = sessionStorage.getItem("record")
    if(record==='personal'){
      uni.navigateTo({
        url: '/pages/apointment/personal-zheng'
      })
    }else if(record==='group'){
      uni.navigateTo({
        url: '/pages/apointment/group-zheng'
      })
    }
	}
</script>

<style scoped>
	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		z-index: -1;
		margin: 12px;
	}

	.top_text {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 10px;
		color: #05261B;
		letter-spacing: 0;
		line-height: 21px;

	}

	.top {
		height: 126px;
		/* width: 259px;!!!!!!! */
		position: absolute;
		top: 149px;
		left: 84px;
		box-sizing: border-box;
		margin-right: 58px;
	}

	.icon {
		width: 32px;
		height: 32px;
		opacity: 1;
		margin-top: 10px;
	}

	.title {
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #05261B;
		letter-spacing: 0;
	}

	.En {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}

	.tip {
		border-radius: 12px;
		/* width: 290px; */
		width: calc(100% - 102px);
		position: absolute;
		bottom: 157px;
		left: 36px;

	}

	.tip2 {
		bottom: 79px;
	}

	.tip3 {
		bottom: 0;
	}

	.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>